<template>
  <template v-if="props.update">
    <el-popover
      v-if="addressList?.length > 0"
      v-model:visible="popoverVisible"
      :placement="props.placement"
      :width="500"
      trigger="click"
    >
      <template #reference>
        <el-text class="text-link" tag="b">
          {{
            showDetail
              ? `${addressList[selectAddIndex]?.contact}，${addressList[selectAddIndex]?.phone}，${addressList[selectAddIndex]?.areaAddress}，${addressList[selectAddIndex]?.detailAddress}`
              : addressList[selectAddIndex]?.areaAddress
          }}
        </el-text>
      </template>
      <el-scrollbar height="200px">
        <el-space direction="vertical" fill style="width: 100%">
          <el-text
            v-for="(item, index) in addressList"
            :key="item?.id"
            :class="selectAddIndex === index ? 'spec-text-click' : ''"
            :line-clamp="1"
            class="spec-text"
            @click="selectAddress(index)"
          >
            <el-tag
              v-if="item?.firstStatus"
              size="small"
              style="margin-right: 10px"
              type="primary"
              >默认
            </el-tag>
            {{ item.contact }}
            ,{{ item?.phone }} , {{ item?.areaAddress }} ,
            {{ item?.detailAddress }}
          </el-text>
        </el-space>
      </el-scrollbar>
      <div style="width: 100%; text-align: center">
        <el-button
          style="width: 50%"
          round
          :size="'small'"
          type="primary"
          @click="toAddress"
          >添加更多地址
        </el-button>
      </div>
    </el-popover>

    <el-space v-else>
      <el-text>暂无地址</el-text>
      <el-button round :size="'small'" type="primary" @click="toAddress"
        >去添加
      </el-button>
    </el-space>
  </template>
  <template v-else>
    <el-text class="text-link" tag="b">
      {{
        showDetail
          ? `${addressList[selectAddIndex]?.contact}，${addressList[selectAddIndex]?.phone}，${addressList[selectAddIndex]?.areaAddress}，${addressList[selectAddIndex]?.detailAddress}`
          : addressList[selectAddIndex]?.areaAddress
      }}
    </el-text>
  </template>
</template>
<script lang="ts" setup>
//获取地址
import { defineEmits, defineProps, nextTick, ref } from "vue";
import { AddressControllerService, AddressVO } from "@/api";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";

const props = defineProps({
  // 出现位置
  placement: {
    type: String,
    default: "bottom",
  },
  // 展示详情
  showDetail: {
    type: Boolean,
    default: false,
  },
  // 地址Id
  addressId: {
    type: String,
    default: "",
  },
  // 是否要确认
  confirm: {
    type: Boolean,
    default: false,
  },
  // 是否允许修改
  update: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(["put-address"]);

const addressList = ref<AddressVO[]>([]);

const popoverVisible = ref(false);
const selectAddIndex = ref(0); //选中的地址索引
//选中的地址索引
async function selectAddress(index: number) {
  if (props.confirm) {
    await ElMessageBox.confirm(
      `确认要修改成${addressList.value[index]?.areaAddress}，${addressList.value[index]?.detailAddress}吗？`,
      "警告",
      {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }
    )
      .then(() => {
        selectAddIndex.value = index;
        emit("put-address", addressList.value[selectAddIndex.value]?.id);
        nextTick(() => {
          //   关闭弹窗
          popoverVisible.value = false;
        });
      })
      .catch(() => {});
  } else {
    selectAddIndex.value = index;
    emit("put-address", addressList.value[selectAddIndex.value]?.id);
    nextTick(() => {
      //   关闭弹窗
      popoverVisible.value = false;
    });
  }
}

async function getAddressList() {
  AddressControllerService.getAddressListUsingGet().then((res) => {
    addressList.value = res.data || [];
    if (props.addressId?.trim().length > 0) {
      selectAddIndex.value = addressList.value.findIndex(
        (item) => item.id === props.addressId
      );
    } else {
      emit("put-address", addressList.value[0]?.id);
    }
  });
}

getAddressList();
const router = useRouter();

function toAddress() {
  router.push({
    path: "/info",
    query: {
      tab: "address",
    },
  });
}
</script>

<style scoped>
.spec-text {
  border: solid 1px #dcdfe6;
  padding: 5px;
  font-size: 12px;
  border-radius: 5px;

  &:hover {
    border: solid 1px #c6e2ff;
    background-color: #ecf5ff;
    color: #409eff;
  }
}

.spec-text-click {
  border: solid 1px #c6e2ff;
  background-color: #ecf5ff;
  color: #409eff;
}
</style>
